<!DOCTYPE html>
<html>

<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta charset="UTF-8" />
	<link rel="shortcut icon" href="https://tencent.github.io/omi/packages/omiu/examples/build/favicon.ico">
	<title>Omi</title>
</head>

<body>
	<script src="https://unpkg.com/omi"></script>
	<script>
		const { define, WeElement, h, render } = Omi

		define('my-counter', class extends WeElement {
			install() {
				this.data.count = 1
				this.sub = this.sub.bind(this)
				this.add = this.add.bind(this)
			}

			sub() {
				this.data.count--
				this.update()
			}

			add() {
				this.data.count++
				this.update()
			}

			render() {
				return h(
					'div',
					null,
					h(
						'button',
						{ onClick: this.sub },
						'-'
					),
					h(
						'span',
						null,
						this.data.count
					),
					h(
						'button',
						{ onClick: this.add },
						'+'
					)
				)
			}
		})

		render(h('my-counter'), 'body')
	</script>

	<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
		<img src="//alloyteam.github.io/github.png" alt="">
	</a>
</body>

</html>